<template>
  <van-field
    v-model="fieldText"
    is-link
    readonly
    @click="showPicker = true"
    v-bind="$attrs"
  />
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="pickerList"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script setup lang="ts">
interface Props {
  pickerList: any[];
}
defineProps<Props>();
const bindModel = defineModel<any>();
const showPicker = ref<boolean>(false);
const fieldText = ref<any>("");

const onConfirm = ({ selectedOptions }: any) => {
  bindModel.value = selectedOptions[0].value;
  fieldText.value = selectedOptions[0].text;
  showPicker.value = false;
};
</script>

<style lang="scss" scoped></style>

